<template>
  <div class="container-water-fall water-content">
    <waterfall :col="col"
               :data="data"
               @loadmore="loadmore">
      <template>
        <div class="cell-item"
             v-for="(item,index) in data"
             :key="index"
             @click="toDetails(item.id)">
          <div class="img-warp">
            <img :src="item.img"
                 alt="加载错误">
            <div v-if="item.isVideo" class="icon-warp">
              <i class="video-icon el-icon-video-play"></i>
            </div>
          </div>
          <div class="item-body">
            <div class="item-desc">{{item.title}}</div>
            <div class="item-footer">
              <div v-if="item.avatar"
                   class="avatar"
                   :style="{backgroundImage : `url(${item.avatar})` }"></div>
              <div class="user">{{item.user}}</div>
              <div class="like">
                <i class="star-icon el-icon-star-off"></i>
                <div class="like-total">{{item.like}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
    <loading :show="loading" />
  </div>
</template>

<script>
  import loading from "../common/Load/Load";
  export default {
    props: {
      title: String
    },
    components: {
      loading
    },
    data() {
      return {
        data: [],
        col: 4,
        loading: false,
        originData: [
          {
            id:1,
            isVideo:true,
            img:
              "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "最近浴室新宠，日系神仙好物了解一下～",
            user: "朱鑫淼",
            like: "953"
          },
          {
            id:2,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
            user: "迷人的小妖精迷人的小妖精",
            like: "952"
          },
          {
            id:3,
            isVideo:true,
            img:
              "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "最近浴室新宠，日系神仙好物了解一下～",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          },
          {
            id:4,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          },
          {
            id:5,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "最近浴室新宠，日系神仙好物了解一下～",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          },
          {
            id:6,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          },
          {
            id:7,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title:
              "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          },
          {
            id:8,
            isVideo:false,
            img:
              "https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",
            avatar:
              "https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
            title: "千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
            user: "迷人的小妖精迷人的小妖精",
            like: "953"
          }
        ]
      };
    },
    computed: {
    },
    methods: {
      loadmore() {
        this.loading = true;
        setTimeout(() => {
          this.data = this.data.concat(this.data, this.data);
          this.loading = false;
        }, 1000);
      },
      toDetails(id){
        this.$router.push({name:'VideoAndArticleDetails',params:{id}});
      }
    },
    mounted() {
      this.loading = true;
      // this.data=this.originData;
      this.$axios({
        url:'http://47.92.167.153:8085/videoAndArticle/index',
        method:'get',
      }).then((res)=>{
        res=res.data;
        if(res.success){
          res=res.data;
          this.data = res;
        }
      }).catch(function(error){
        console.log(error)
      });
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  };
</script>

<style  lang="stylus">
  .container-water-fall {
    box-sizing: border-box;
    &.water-content {
      margin:70px 50px;
    }
    /*.vue-waterfall-column*/
    h4 {
      padding-top: 56px;
      padding-bottom: 28px;
      font-size: 36px;
      color: #000000;
      letter-spacing: 1px;
      text-align: justify;
    }
    button {
      background-color: #ff0;
      color: #24292e;
      border: 1px solid rgba(27, 31, 35, 0.2);
      border-radius: 0.25em;
      width: 100px;
      line-height: 26px;
      font-size: 13px;
      margin: 4px 0;
      margin-right: 4px;
      cursor: pointer;
      outline: none;
      &.blue-light {
        background: #27fbc2;
      }
    }
    button:hover {
      background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
    }

    .cell-item {
      width: 92%;
      background: #ffffff;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 6px;
      margin-top: 20px;
      cursor pointer
      position relative
      &:hover{
        &:after{
          width: 100%;
          height: 100%;
          background-color: rgba(0,2,4,.2);
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 8px;
          content: "";
        }
      }
      .img-warp{
        position relative
        img {
          width: 100%;
          height: auto;
          display: block;
        }
        .icon-warp{
          position absolute
          top 10px
          right 10px
          background-color: #fff;
          border-radius: 16px;
          .video-icon{
            font-size 30px
          }
        }
      }
      .item-body {
        // border: 1px solid #F0F0F0;
        padding: 12px;
        .item-desc {
          color: #000;
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
        }
        .item-footer {
          margin-top: 22px;
          position: relative;
          display: flex;
          align-items: center;
          .avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          .user {
            max-width: 150px;
            width: 87px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-left: 10px;
            color: #555;
            font-size: 12px;
          }
          .like {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            &:hover {
              i {

              }
              .like-total {
                color: #ff4479;
              }
            }
            i {
              font-size 20px
            }
            .like-total {
              margin-left: 5px;
              font-size: 13px;
              color: #999999;
            }
          }
        }
      }
    }
  }
</style>
